{ "err_no": 0, "err_msg": "success", "data": { "booklet": { "booklet_id": "6946117847848321055", "base_info": { "id": 0, "booklet_id": "6946117847848321055", "title": "Babel 插件通关秘籍", "price": 3990, "category_id": "6809637767543259144", "status": 1, "user_id": "2788017216685118", "verify_status": 4, "summary": "深入探究 babel 编译原理,学完可以写任何 babel 插件。我们会进行大量的实战,最后还会手写一个简易的 babel。", "cover_img": "https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1646d797b8c34de6b4d323657f430635~tplv-k3u1fbpfcp-watermark.image", "section_count": 34, "section_ids": "6946582409638838308|6956174385904353288|6946578914382708770|6946582409664004133|6946578914764390434|6945997926376144899|6947682728200372232|6947689001713139720|6947678220401508392|6982846603283398687|6946582521672892456|6947733921123532814|6954550974698651680|6947175741821812768|7093335532888915982|6978397048307466252|6966211099620278272|6951617082454704162|6951617020198813733|6947733961896362025|6947735050972561415|6947734309755158559|6951616852606844966|6965661918937743371|6965724651297177640|6982591235101818880|6951616445134405669|6994379397419499523|6995151247120531493|6995460468261257246|6994995289954189327|6994379397591466017|6995834908002222117|6995835006530617381|6947682728250736676", "is_finished": 1, "ctime": 1618158571, "mtime": 1655952478, "put_on_time": 1621854938, "pull_off_time": 1621836018, "finished_time": -62135596800, "recycle_bin_time": -62135596800, "verify_time": -62135596800, "submit_time": 1655952478, "top_time": 1645760339, "wechat_group_img": "https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3905dba20c8a41ddb889c501f754f6b7~tplv-k3u1fbpfcp-watermark.image?", "wechat_group_desc": "", "wechat_group_signal": "babel", "read_time": 33482, "buy_count": 4149, "course_type": 1, "background_img": "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ab20cfd6ea2042049a580fdd136352fc~tplv-k3u1fbpfcp-watermark.image?", "is_distribution": 1, "distribution_img": "https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/07d0989578004cefb7cb61d9317272aa~tplv-k3u1fbpfcp-zoom-1.image?", "commission": 798, "can_vip_borrow": true, "is_sign": false }, "reading_progress": { "id": 0, "booklet_id": "6946117847848321055", "user_id": "3210229681503629", "status": 1, "buy_type": 1, "reading_end": 0, "reading_progress": 1, "last_section_id": "6956174385904353288", "has_update": 1, "last_rtime": 1658224968, "ctime": 1621995561, "mtime": 1658224937, "valid_begin_time": 0, "valid_end_time": 0, "borrow_times": 0 }, "user_info": { "user_id": "2788017216685118", "user_name": "zxg_神说要有光", "company": "", "job_title": "公号「神光的编程秘籍」", "avatar_large": "https://p9-passport.byteacctimg.com/img/user-avatar/4e9e751e2b32fb8afbbf559a296ccbf2~300x300.image", "level": 6, "description": "小册《typescript 类型体操通关秘籍》已上线", "followee_count": 202, "follower_count": 6685, "post_article_count": 184, "digg_article_count": 450, "got_digg_count": 14568, "got_view_count": 934054, "post_shortmsg_count": 68, "digg_shortmsg_count": 31, "isfollowed": false, "favorable_author": 1, "power": 23908, "study_point": 0, "university": { "university_id": "0", "name": "", "logo": "" }, "major": { "major_id": "0", "parent_id": "0", "name": "" }, "student_status": 0, "select_event_count": 0, "select_online_course_count": 0, "identity": 0, "is_select_annual": true, "select_annual_rank": 0, "annual_list_type": 0, "extraMap": {}, "is_logout": 0, "annual_info": [], "account_amount": 0, "user_growth_info": { "user_id": 2788017216685118, "jpower": 0, "jscore": 494.4, "jpower_level": 0, "jscore_level": 4, "jscore_title": "进阶掘友", "author_achievement_list": [], "vip_level": 0, "vip_title": "" }, "is_vip": false }, "event_discount": null, "is_buy": true, "section_updated_count": 34, "is_new": false }, "introduction": { "id": 83928, "section_id": "6946582409638838308", "title": "小册介绍", "user_id": "2788017216685118", "booklet_id": "6946117847848321055", "status": 1, "content": "
某一线大厂某架构组前端工程师,公众号[神光的编程秘籍],维护公司的 builder 和 ide,对编译原理、前端工程化有一定的研究。
\nbabel 已经是前端领域的必备工具了,它可以让我们使用一些新的语法和 api,babel 会在编译的过程中转为目标环境的支持的语法并引入 polyfill。除此以外,babel 也提供了强大的插件机制,我们可以通过它暴露出的 api 来开发各种代码转换插件。
\nbabel 是一种源码到源码的转换编译器,学习 babel 的原理的过程也会学到编译原理的一些知识。
\n除了作为转译工具外,babel 也经常用来做静态分析,分析代码,提取信息,然后用于生成文档、lint、type check 等,我们会用大量的实战案例,让你真正能够把 babel 的静态分析能力用起来。
\n实战部分包括:
\n自动国际化:自动完成代码的国际化,帮大家扩展下思路,你会发现 babel 原来还可以用来做一些对业务有意义的自动化的事情。
\n自动生成文档:自动生成 api 文档,不再需要手动去维护。
\n自动埋点:自动进行函数插桩,埋点是一种常见的函数插桩。
\nlinter: 探索 eslint、stylelint 等 lint 工具的实现原理,能够手写各种检查插件。
\ntype checker:实现简单的 ts 类型检查,会对 typescript 的类型检查的原理会有更深的理解。
\n压缩混淆:前端必用工具之一,探索它的实现原理,压缩怎么做,混淆怎么做,怎么用 babel 实现,开阔下思路。
\njs 解释器: AST 除了转译、静态分析外,还可以直接解释执行,学完这个案例可以知道解释器是怎么解释代码的。
\n模块遍历器:基于 babel 做模块的遍历,理解打包工具的依赖图构建原理。
\n手写 babel: 手写 babel 是为了加深对 babel 的理解,真正掌握 babel。
\n小册分为 babel 插件基础、babel 插件进阶、babel 插件实战、手写简易的 babel 四部分内容:
\n